<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/5/13
  Time: 10:11
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="commons/header.jsp"%>

<form class="form-inline" onsubmit="javascript: return false;">
    <div class="form-group">
        <label for="name">订单号: </label>
        <input autocomplete="off" class="form-control" id="name">
    </div>
    <div class="form-group">
        <label for="goods">商品: </label>
        <input autocomplete="off" class="form-control" id="goods">
    </div>
    <div class="form-group">
        <label for="status">订单状态: </label>
        <select class="form-control" id="status">
            <option value="-1">全部</option>
            <option value="0">未支付</option>
            <option value="1">已支付</option>
            <option value="2">已取消</option>
        </select>
    </div>
    <div class="form-group">
        <label for="number">订单数量: </label>
        <input autocomplete="off" class="form-control" id="number">
    </div>
    <div class="form-group">
        <label>注册日期: </label>
        <input class="form-control" readonly autocomplete="off" id="beginRegisterDate"> -
        <input autocomplete="off" readonly class="form-control" id="endRegisterDate">
    </div>
    <div class="form-group">
        <button class="btn btn-danger" onclick="querySearch()">搜索</button>
        <button autocomplete="off" class="btn btn-danger" onclick="resetSearch()">重置</button>
    </div>
</form>

<table id="goodsDataTable" class="table table-bordered table-striped"></table>

<div class="modal" id="addGoodsModal" data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button onclick="destoryAddGoodsModal()" class="close">
                    <span>&times;</span>
                </button>
                <h3 class="modal-title">用户信息</h3>
            </div>
            <div class="modal-body">
                <form>
                    <input type="hidden" id="imageServerPath">
                    <div class="form-group">
                        <label for="title">买家</label>
                        <input class="form-control" autocomplete="off" id="title" disabled="disabled" value="45645">
                    </div>
                    <div class="form-group">
                        <label for="items">买家电话</label>
                        <input class="form-control" autocomplete="off" id="items" disabled="disabled" value="45645">
                    </div>

                    <div class="form-group">
                        <label for="price">买家地址</label>
                        <input class="form-control" autocomplete="off" id="price" disabled="disabled">
                    </div>

                </form>
            </div>
            <div class="modal-footer">
                <button onclick="destoryAddGoodsModal()" class="btn btn-danger">取消</button>

            </div>
        </div>
    </div>
</div>


<div class="modal" id="changeOrders" data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button onclick="destoryAddGoodsModal01()" class="close">
                    <span>&times;</span>
                </button>
                <h3 class="modal-title">改变地址</h3>
            </div>
            <div class="modal-body">
                <form>
                    <input type="hidden" id="imageServerPath01">
                    <div class="form-group">
                        <label for="title01">原地址</label>
                        <input class="form-control" autocomplete="off" id="title01" disabled="disabled" >

                        <table class="table table-hover table-bordered table-striped" id="dataTable">
                            <thead>
                            <tr>
                                <th>现地址</th>

                            </tr>
                            </thead>
                            <tbody id="users">
                            <tr v-for ="a in addresses" >

                                <td><input type="radio" name="type00" :value="a.id" onclick="getChangeId(this)">{{a.address}}</td>
                            </tr>

                            </tbody>
                        </table>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button onclick="destoryAddGoodsModal01()" class="btn btn-danger">取消</button>
                <button class="btn btn-success" onclick="changeAddress()">确认</button>
            </div>
        </div>
    </div>
</div>

<%@ include file="commons/footer.jsp"%>
<script>
    var goodsId01
    var goodsId02;
    var goodsId03;
    var goodsId04;

    function getChangeId(btnTag) {
        var userId = $(btnTag).attr('value');
        goodsId04 = userId;

    }

    var vm = new Vue({
        el:'#dataTable',
        data:{
            addresses:[]
        }
    })

    //显示订单管理全部信息
    $('#goodsDataTable').bootstrapTable({

        url: '${pageContext.servletContext.contextPath}/address',
        method: 'GET',
        columns: [
            // field是返回rows中每个对象的属性名
            {title: '订单ID', field: 'id', align: 'center'},
            {title: '订单号', field: 'order_no'},
            {title: '商品', field: 'goods',formatter: formatTitle },
            {title: '订单价格', field: 'price'},
            {title: '订单数量', field: 'number'},
            {title: '订单状态', field: 'status',formatter: formatStatus},
            {title: '下单日期', field: 'create_time',formatter: formatTime},
            {title: '操作',formatter: addProcessBtn}
        ],
        queryParams: function (params) {

            var name = $('#name').val();  //获取查询表单name的值
            var goods = $('#goods').val();
            var status = $('#status').val();
            var number = $('#number').val();
            var begin = $('#beginRegisterDate').val(); //重置name
            var end = $('#endRegisterDate').val(); //重置name

            params.name = name;
            params.goods = goods;
            params.status = status;
            params.number = number;
            params.begin = begin;
            params.end = end;
            params.method = 'getAddress';
            return params;
            // 最终的请求会默认帮我们带上这些参数
            //http://localhost:8081/my_cart_war_exploded/user?order=asc&offset=0&limit=10&name=&gender=-1&status=-1&email=&begin=&end=&method=getUserPageData
        },
        sidePagination: 'server',
        pagination: true, //表示使用分页
        toolbar: '#goodsTableToolbar' , //设置工具条
        pageList: [10, 15, 20]
    })

    // 格式化日期
    function formatTime(value) {
        return moment(value).format('YYYY-MM-DD HH:mm:ss')
    }

    //订单状态
    function formatStatus(value, rows) {
        if (value ==0){
            return '<span class="label label-warning">未支付</span>'
        }else if (value ==1){
            return '<span class="label label-success">已支付</span>'

        }else if (value ==2){
            return '<span class="label label-danger">已取消</span>'

        }else if (value ==3){
            return '<span class="label label-success">已过期</span>'

        }else if (value ==4){
            return '<span class="label label-success">退款中</span>'

        }else if (value ==5){
            return '<span class="label label-success">退款成功</span>'

        }else if (value ==6){
            return '<span class="label label-success">发货中</span>'

        }

    }

    // 添加操作按钮
    function addProcessBtn(value, row) {
        //订单id
        var goodsId001 =row.id;
        goodsId01 = goodsId001;
        //地址a_id
        var goodsId002 = row.a_id;
        goodsId02 =goodsId002;
        //用户对应u_id
        var goodsId003 = row.u_id;
        goodsId03 =goodsId003;

        return[
            '<button onclick="getUserAddress(' + goodsId01 + ')" class="btn btn-danger btn-xs">查看详情</button>&nbsp&nbsp;',
            '<button onclick="changeOrderAddress(' + goodsId02 + ')" class="btn btn-primary btn-xs">改变地址</button>'
        ].join("")

    }


   //当内容长度大于30的时候，多余的不显示
    function formatTitle(value) {
    var length = value.length; //获取文本长度
    if(length > 30) {
        return value.substring(0, 31) + '...';
    }
    return value;
}

   // 隐藏模态框
    function destoryAddGoodsModal() {

        $('#addGoodsModal').modal('hide');
    }

    // 隐藏模态框
    function destoryAddGoodsModal01() {

        $('#changeOrders').modal('hide');
    }

    //获取订单对应用户的信息
    function getUserAddress(goodsId) {

        // var userId = $(obj).attr('uid');
        $.ajax({
            // url: "http://localhost:8080/address",
            url: '${pageContext.servletContext.contextPath}/address',
            type: 'get',
            dataType: 'json',
            data: {userId:goodsId, method: 'getUserAddress'},
            success: function(_data) {
                $('#title').val(_data.username)
                $('#items').val(_data.usernamePhone)
                $('#price').val( _data.userAddress)
            }
        })


        $('#addGoodsModal').modal('show');
    }

    //展示订单可选的收获地址
    function getpages(){
        vm.addresses=[];
        $.ajax({
            url: '${pageContext.servletContext.contextPath}/address',
            type:'get',
            dataType:'json',
            data:{method:'getAddAddress',userId:goodsId03},
            success:function (_data) {
                for(var i = 0; i < _data.length; i++) {
                    vm. addresses.push(_data[i])
                }
            }
        })
    }

    //展示订单的收获地址
    function changeOrderAddress(goods02Id) {

        $.ajax({
            // url: "http://localhost:8080/address",
            url: '${pageContext.servletContext.contextPath}/address',
            type: 'get',
            dataType: 'json',
            data: {userId:goodsId01, method: 'getUserAddress'},
            success: function(_data) {

                $('#title01').val( _data.userAddress)
            }
        })

        getpages();

        $('#changeOrders').modal('show');

    }

    //改变收获地址
    function changeAddress(goodsId) {

        $.ajax({
            url: '${pageContext.servletContext.contextPath}/address',
            type:'get',
            dataType:'json',
            data:{method:'changeAddress',userId:goodsId03,aid:goodsId02,changeId:goodsId04},
            success:function (_data) {

                if(_data.code == 1){
                    destoryAddGoodsModal01()
                    $('#goodsDataTable').bootstrapTable('refresh');
                }

            }
        })
    }



//订单状态的改变
    <%--function changeStatus() {--%>

    <%--    var goodsId = changeOrderStatus();--%>
    <%--    console.log(goodsId);--%>

    <%--    // $('input:radio').click(function (e) {--%>
    <%--    //     let val = $(this).val()--%>
    <%--    //     console.log(val);--%>
    <%--    // })--%>
    <%--    // var statusId = $('input[name="status"]:checked').val();--%>
    <%--    var statusId = $("input[name='status']:checked").val();--%>


    <%--    $.ajax({--%>
    <%--        // url: "http://localhost:8080/address",--%>
    <%--        url: '${pageContext.servletContext.contextPath}/address',--%>
    <%--        type: 'get',--%>
    <%--        dataType: 'json',--%>
    <%--        data: {userId:goodsId,statusId:statusId,method: 'changeOrderStatus'},--%>
    <%--        success: function(_data) {--%>
    <%--            $('#goodsDataTable').bootstrapTable('refresh');--%>
    <%--        }--%>
    <%--    })--%>
    <%--}--%>

    $('#beginRegisterDate, #endRegisterDate').datetimepicker({
        // 格式化 yyyy-mm-dd hh:ii:ss 年-月-日 时-分-秒
        format: 'yyyy-mm-dd hh:ii:ss'
    })

    // 搜索
    function querySearch() {
        // 解决翻页之后, 还是停留在以前的页面问题, 使用selectPage, 意思是回到第一页
        $('#goodsDataTable').bootstrapTable('selectPage', 1);
    }

    function resetSearch() {
        $('#name').val(''); //重置name
        $('#goods').val(''); //重置性别
        $('#status').val('-1'); //重置状态
        $('#number').val('');
        $('#beginRegisterDate').val('');
        $('#endRegisterDate').val('');
        querySearch();
    }






</script>

